<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">告警历史</h5>
                    <div class="stayRight ">
                        <el-button @click="siteconfList(1)" icon="star-off">刷新</el-button>
                        <!-- <el-button type="primary" @click="showMonitor()">创建监控点</el-button> -->
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <!-- 
                        <div class="searchSel">
                            <el-select v-model="tpvalue" placeholder="全部监控">
                                <el-option v-for="item in typeMonitorOptions" :key="item.tpvalue" :label="item.label" :value="item.tpvalue" @click="siteconfList(1,tpvalue)">
                                </el-option>
                            </el-select>
                        </div>
                         -->
                        <div class="searchIpt">
                            <el-input v-model="searchStr" placeholder="请输入产品类型或故障资源进行搜索"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="siteconfList(1,searchStr,10)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="instanceType" label="产品类型" > </el-table-column>
                    <el-table-column prop="faultInstance" label="故障资源" > </el-table-column>
                    <el-table-column prop="alarmTimeStr" label="发生时间" > </el-table-column>
                    <el-table-column prop="ruleName" label="规则名称" > </el-table-column>
                    <el-table-column prop="contactType" label="通知方式" > </el-table-column>
                    <el-table-column prop="status" label="状态" > </el-table-column>
                    <el-table-column prop="contactGroups" label="通知对象" > </el-table-column>
                    <!-- <el-table-column label="操作">
                        <template scope="scope">
                            <el-button  size="small"  type="text"   @click="showMonitor(scope.$index, dataArr)">编辑</el-button> |
                            <router-link  :to="'/sites/sitesRule/'+scope.row.id">告警规则</router-link> 
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <!-- 
                    <div class="pullLeft">
                        <el-button  size="small" name="button-del" @click="delAll()" :disabled="pdisabled">批量删除</el-button>
                        <el-button  size="small" ><router-link  :to="'/sites/sitesallRule/'">查看全部规则</router-link> </el-button>
                        
                    </div>
                     -->
                </div>

            </section>


            <el-dialog :title="monitorTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                <!-- <h4 class="dialogtitle">创建监控点</h4> -->
                <div class="scoreContainer tagCategory">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="产品类型" prop="type">
                            <el-select v-model="ruleForm.type" placeholder="请选择站点类型">
                                <el-option label="HTTP" value="HTTP"></el-option>
                                <el-option label="PING" value="PING"></el-option>
                                <el-option label="TCP" value="TCP"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="故障资源" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="发生时间" prop="address">
                            <el-input type="textarea" v-model="ruleForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="持续时间" prop="frequency">
                            <el-select v-model="ruleForm.frequency" placeholder="请选择监控频率">
                                <el-option label="1分钟" value="1"></el-option>
                                <el-option label="5分钟" value="5"></el-option>
                                <el-option label="15分钟" value="15"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="请求方法" prop="rqType" v-show="ruleForm.type === 'HTTP'">
                            <el-radio-group v-model="ruleForm.rqType">
                            <el-radio label="GET "></el-radio>
                            <el-radio label="POST"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        
                        <el-form-item label="端口号" prop="port"  v-show="ruleForm.type === 'TCP'">
                            <el-input v-model="ruleForm.port"></el-input>
                        </el-form-item>
                        <!-- <el-form-item  >
                            <el-button @click="sethigh ">高级设置</el-button>
                        </el-form-item> -->
                        
                    </el-form>
                   
                </div>          
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="creatSubmit('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import { modifySiteConf, deleteBatchSiteConf } from '@/api/getData'
import { queryHistoryList } from '@/api/alarmRulesData'
export default {
  data() {
    return {
      dataArr: null,
      monitorTitle: '',
      dataAddress: [],
      listLoading: true,
      isNotPermission: '',
      advancedSettings: false,
      pdisabled: true,
      creatDialogVislble: false,
      currentSetting: '',
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      hightsetting: false,
      hasError: false,
      selected: '',
      tpvalue: '',
      searchStr: '',
      multipleSelection: [],
      typeMonitorOptions: [{
        tpvalue: 'HTTP'
      }, {
        tpvalue: 'TCP'
      }, {
        tpvalue: 'PING'
      }],
      ruleForm: {
        type: '',
        name: '',
        rqType: '',
        frequency: '',
        address: '',
        cookie: '',
        httpHeader: '',
        httpVerifyName: '',
        httpVerifyPassword: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择站点类型', trigger: 'change' }
        ],
        frequency: [
          { required: true, message: '请选择监控频率', trigger: 'change' }
        ],
        rqType: [
          { required: true, message: '请选择请求方法', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请选择监控地址', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.siteconfList(1)
  },
  methods: {
    siteconfList(curr, searchStr, size) {
      this.listLoading = true
      if (size === undefined) {
        size = 10
      }
      var listQuery = { currPage: curr, searchStr: searchStr, pageSize: size }
      console.log(listQuery, '======')
      queryHistoryList(listQuery).then(response => {
        console.log(response.data)
        this.dataArr = response.data.data
        this.listLoading = false
        this.totalSize = response.data.totalRows
        this.currentPage = curr
        this.pagesz = size
      })
    },
    showMonitor(index, data) {
      this.creatDialogVislble = true
      if (data !== undefined) {
        this.monitorTitle = '修改监控点'
        this.ruleForm = {
          type: data[index].type,
          id: data[index].id,
          name: data[index].name,
          rqType: data[index].rqType,
          frequency: data[index].frequency,
          address: data[index].address,
          cookie: data[index].cookie,
          httpHeader: data[index].httpHeader,
          httpVerifyName: data[index].httpVerifyName,
          httpVerifyPassword: data[index].httpVerifyPassword
        }
      } else {
        this.monitorTitle = '创建监控点'
        this.ruleForm = {
          type: '',
          name: '',
          rqType: '',
          frequency: '',
          address: '',
          cookie: '',
          httpHeader: '',
          httpVerifyName: '',
          httpVerifyPassword: ''
        }
      }
    },
    creatSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   console.log(this.ruleForm, 'ruleForm')
          modifySiteConf(this.ruleForm).then(response => {
            console.log(response.data)
            this.dataArr = response.data.data
            this.listLoading = false
            this.creatDialogVislble = false
            this.siteconfList(1)
          })
        }
      })
    },
    sethigh() {
      this.hightsetting = true
    },
    handleSizeChange(val) {
      this.siteconfList(1, '', '', val)
    },
    handleCurrentChange(val) {
      this.siteconfList(val)
    },
    delAll() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      console.log(obj, 'idQuery')
      deleteBatchSiteConf(obj).then(response => {
        console.log(response.data)
        this.siteconfList(1)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}
.statusError{
    color: red;
}
</style>


